{{ "<!-- Clients section -->" | safeHTML }}
<section class="section-clients">
    {{ with .Site.Data.clients.title }}<h3 id="clients">{{ . }}</h3>{{ end }}

    <div class="clients-mobile-nav">
    {{ range $i, $e := .Site.Data.clients.list }}
	    {{ if eq $i 0 }}
	    <span class="active-client"></span>
	    {{ else }}
	    <span></span>
	    {{ end }}
    {{ end }}
    </div>

    <div class="clients-belt">
    {{ range $i, $e := .Site.Data.clients.list }}
    <div class="client-unit {{ if eq $i 0 }}active-client{{ end }}">   <!-- CONDITIONAL CSS CLASS -->
        <figure class="client-face">
            <img src="img/clients/{{ .avatar }}" alt="client-face">
            <figcaption>
                <strong class="client-name">{{ .name }}</strong>
                <em class="client-title">{{ .title }}</em>
            </figcaption>
        </figure>
        <div class="client-content">
            <div class="client-quote-mark">{{ partial "icons/icon-quote-mark.html" . }}</div>
            {{ .quote | markdownify }}
        </div>
    </div>
    {{ end }}
	</div>

    <div class="client-controls">
        <div class="client-control-next">{{ partial "icons/icon-next.html" . }}</div>
        <div class="client-control-prev">{{ partial "icons/icon-prev.html" . }}</div>
    </div>

    <div class="clients-logos">
    {{ range $i, $e := .Site.Data.clients.list }}
      	{{ if eq $i 0 }}
       	<img class="client-logo active-client" src="img/clients/{{ .logo }}" align="{{ .logo }}">
		{{ else }}
    	<img class="client-logo" src="img/clients/{{ .logo }}" align="{{ .logo }}">
       	{{ end }}
    {{ end }}
    </div>

</section>
